<script setup lang="ts">
import { reactive, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { new_guide_share_info_api } from "@/package/novice/api/new_guide";
import { Router } from "@/utils/router";
import { Toast } from "@/utils/toast";

import NavBack from "@/components/nav/back.vue";
import MediaVideo from "@/components/media/video.vue";

onLoad((options) => {
  new_guide_share_info_api({ id: options?.id }).then((resp) => {
    infoData.video_url = resp.video_url;
    infoData.video_pic = resp.video_pic;
    infoData.author_avatar = resp.author_avatar;
    infoData.author_name = resp.author_name;
    infoData.source_content = resp.source_content;
  });

  tempData.id = options?.id;
});

const infoData = reactive({
  video_url: "",
  video_pic: "",
  author_avatar: "",
  author_name: "",
  source_content: "",
});

const tempData = { id: "" };
</script>

<template>
  <NavBack navigationBarTextStyle="white" />

  <view class="detail-video">
    <MediaVideo
      :src="infoData.video_url"
      :poster="infoData.video_pic"
      autoplay
    />
  </view>

  <view class="detail-fixed">
    <view class="detail-user">
      <image
        class="detail-user-avatar"
        :src="infoData.author_avatar"
        mode="aspectFill"
      />
      <view class="detail-user-name">{{ infoData.author_name }}</view>
    </view>

    <view class="detail-content">{{ infoData.source_content }}</view>
  </view>
</template>

<style lang="scss">
page {
  background-color: #000000;
}

.detail-video {
  width: 100vw;
  height: calc(100vh - env(safe-area-inset-bottom));
}

.detail-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(110rpx + env(safe-area-inset-bottom));
}

.detail-user {
  position: absolute;
  left: 30rpx;
  top: -110rpx;
  display: flex;
  align-items: center;

  .detail-user-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
  }

  .detail-user-name {
    margin-left: 20rpx;
    font-size: 36rpx;
    color: #ffffff;
    font-weight: bold;
  }
}

.detail-content {
  max-height: 92rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
  color: #f8f8f8;
  line-height: 46rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>